<template>
  <view class="page">
    <div class="page-content">
      <div class="my-fishlist">
        <div class="search-box">
          <u-search placeholder="筛选鱼获" v-model="category.name" disabled @custom="getList" @click="openFish"></u-search>
        </div>
        <div class="my-fishlist-item" v-for="item in myFishList">
          <div class="my-fishlist-item-header">
            <u-section :title="item.fish.name" :right="false" :font-size="32" color="rgb(254, 129, 5)"></u-section>
            <div class="status">{{ item.create_time }}</div>
          </div>
          <div class="cell-list">
            <u-row gutter="12">
              <u-col span="6">
                <div class="cell-item">
                  <span class="label">重量</span>：{{ item.weight }}
                </div>
              </u-col>
              <u-col span="6">
                <div class="cell-item">
                  <span class="label">长度</span>：{{ item.length }}
                </div>
              </u-col>
              <u-col span="6">
                <div class="cell-item">
                  <span class="label">用饵</span>：{{ item.lure.name }}
                </div>
              </u-col>
              <u-col span="6">
                <div class="cell-item">
                  <span class="label">放流/放油</span>：{{ item.release_type }}
                </div>
              </u-col>
              <u-col span="12">
                <div class="cell-item">
                  <span class="label">星期</span>：{{ getWeek(item.publish_time) }}
                </div>
              </u-col>
              <u-col span="12">
                <div class="cell-item">
                  <span class="label">备注</span>：{{ item.remark }}
                </div>
              </u-col>
              <u-col span="12">
                <div class="cell-item">
                  <span class="label">地址</span>：{{ item.address }}
                </div>
              </u-col>
            </u-row>
          </div>
          <div class="item-image">
            <image :src="$baseUrl + item.image" style="width: 100%"></image>
          </div>
          <div class="item-button-box">
            <div class="item-button" @click="onDel(item)">删除</div>
          </div>
        </div>
      </div>
    </div>
    <u-select
        confirm-color="rgb(254, 129, 5)"
        cancel-color="rgb(254, 129, 5)"
        v-model="show" :list="categoryList"
        @confirm="onConfirmCategory"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      $baseUrl: this.$baseUrl,
      keyword: '',
      myFishList: [
      ],
      show: false,
      categoryList: [],
      category: {
        id: '',
        name: ''
      }
    }
  },
  onShow() {
    this.$api.fishList().then(res => {
      this.categoryList = res.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    })
    this.getList()
  },
  methods: {
    getWeek(time) {
      let week = new Date(time).getDay()
      let weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      return weekArr[week]
    },
    openFish() {
      this.show = true
    },
    onConfirmCategory(e) {
      console.log(e)
      this.show = false
      this.category.id = e[0].value
      this.category.name = e[0].label
      console.log(this.category)
    },
    getList() {
      if (!this.$store.state.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中'
      })
      this.$api.fishCatchList({
        member_id: this.$store.state.userInfo.id,
        fish_id: this.category.id,
      }).then(res => {
        uni.hideLoading()
        this.myFishList = res
      }).catch(() => {
        uni.hideLoading()
      })
    },
    onDel(item) {
      let that = this
      uni.showModal({
        title: '提示：',
        content: '请确认是否要删除?',
        success: function(res) {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中'
            })
            that.$api.deleteFishCatch({
              id: item.id
            }).then(() => {
              uni.hideLoading()
              that.getList()
            }).catch(() => {
              uni.hideLoading()
            })
          } else if (res.cancel) {
            // console.log('取消');
            //TODO
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.page-content {
  padding: 20rpx;
}
.my-fishlist {

  .search-box {
    background-color: #ffffff;
    padding: 10rpx 20rpx;
    margin-bottom: 20rpx;
  }
  .my-fishlist-item {
    border-radius: 14rpx;
    overflow: hidden;
    background-color: #fff;
    .item-button-box {
      margin: 20rpx;
      display: flex;
      align-items: center;justify-content: flex-end;
      .item-button {
        padding: 10rpx 60rpx;
        border: 1px solid rgb(254, 129, 5);
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: rgb(254, 129, 5);
        border-radius: 14rpx;
      }
    }
    .item-image {
      padding: 0 20rpx;
    }
    .cell-list {
      padding:0 20rpx 20rpx;
      .cell-item {
        .label {
          color: #999999;
          font-size: 28rpx;
        }
        padding: 10rpx 0;
        font-size: 28rpx;
        color: #333333;
      }
    }
    .my-fishlist-item-header-desc {
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
    }
    .my-fishlist-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      .status {
        color: #333333;
        font-weight: bold;
        flex-shrink: 0;
      }
    }
  }
}
</style>
